import React, { Component } from 'react';
import {Button, message} from 'antd';

export default class Fifteen extends Component {
    constructor(props, context) {
        super(props);
        this.state = {
            name: '',
            age: ''
        };
        this.context = this.context;
    }

    handleClick() {
        /**
         * this.setState是一个异步操作，这就是为什么会有第二个参数一个回调函数；
         * 通常最好使用零一个生命周期方法，而不依赖这个回调函数；
        */
        this.setState(
            {
                name: this.name.value,
                age: this.age.value
            }, () => {
                message.success((this.state.name), 2);
        });
        // message.success(this.state.name, 2);
    }
    render() {
        return (
            <div>
                <h1>这是测试this.setState</h1>
                姓名：<input type="text" ref={(name) => this.name = name}/>
                <hr/>
                年龄：<input type="text" ref={(age) => this.age = age}/> 
                <hr/>
                <Button type="primary" size="large" onClick={() => this.handleClick()}>Test</Button>
            </div>
        )
    }
}